.o-badge--item {
    width: 120px;
    box-shadow: 1px 2px 4px 0px;
}

.o-badge--count {
    width: 40px;
    text-align: left;
}

.o-badge--char {
    width: 80px;
}

.o-badge--rarity-crystal {
    --badge-light: rgb(255,103,173);
    --badge-color: rgb(46,41,5);
    box-shadow: 1px 2px 4px 0px #333;
}

.o-badge--rarity-5 {
    --badge-light: rgb(161,72,5);
    --badge-color: rgb(250,225,95);
    box-shadow: 1px 2px 4px 0px #333;
}
.o-badge--rarity-4 {
    --badge-light: rgb(250,198,2);
    --badge-color: rgb(46,41,5);
    box-shadow: 1px 2px 4px 0px #333;
}
.o-badge--rarity-3 {
    --badge-light: rgb(214,197,214);
    --badge-color: rgb(46,33,63);
    box-shadow: 1px 2px 4px 0px #333;
}
.o-badge--rarity-2 {
    --badge-light: rgb(0,179,252);
    --badge-color: black;
    box-shadow: 1px 2px 4px 0px #333;
}
.o-badge--rarity-1 {
    --badge-light: rgb(220,229,55);
    --badge-color: black;
    box-shadow: 1px 2px 4px 0px #333;
}
.o-badge--rarity-0 {
    --badge-light: rgb(160,160,160);
    --badge-color: black;
    box-shadow: 1px 2px 4px 0px #333;
}

.l-layout__sidebar, .l-header__logo {
    box-shadow: 5px 2px 10px 0px #3333;
    z-index: 10;
    border-right: 1px solid #ccc;
}

.tooltip-inner {
    max-width: 600px;
}

.table th {
    font-weight: 600;
}
.card-header {
    padding: 0.5rem 1.5rem!important;
}
.card-title {
    font-weight: 600!important;
}
.card-body {
    padding: 1rem 1.875rem!important;
}

h5 {
    font-weight: 600!important;
}

strong {
    font-weight: 600!important;
}

.img_char {
       /* box-shadow:2px 2px 4px #888;*/
       border-radius: 5px;
}
.figure :hover{
    background:#f1f1f1;
    box-shadow:2px 2px 4px #444;
}
.img-char :hover{
    background:#f1f1f1;
    box-shadow:2px 2px 4px #444;
}
.dps_table_header {
    width: 18%;
    max-width: 200px;
}
.dps_menu_item {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
}
.dps_menu_item_50 {
    width: 50%;
}
.dps_menu_item_70 {
    width: 70%;
}
.dps_menu_item_30 {
    width: 30%;
}
.table_equip_blackboard {
    word-break: break-all;
}

@media (max-width: 840px) {
    .dps_table_header {
        width: 18%;
    }
    .dps_menu_item {
        flex-flow: column wrap;
    }
    .dps_menu_item_50 {
        width: 100%;
    }
    .dps_menu_item_70 {
        width: 100%;
    }
    .dps_menu_item_30 {
        width: 100%; 
    }

    table.dps_responsive tr th { /* 隐藏真实表头 */
        display: none;
    }
    table.dps_responsive tr{
        border-bottom: 1px solid #e0e0e0;
        display: block;
    }
    table.dps_responsive tr td {
        position: relative;
        padding-left: 30%; /* 数据列左边留 30% 空间给新的表头 */
        border-bottom: 1px solid #e0e0e0;
        text-align: center;
        background: #fff;
        display: block;
    }
    table.dps_responsive tr td::before {
        content: attr(data-th); /* 使用 data-th 属性生成新的表头 */
        position: absolute;
        left: 15%;  /* 30/2 */
        transform: translateX(-50%); /* left 与 transform 配合实现表头居中 */
        font-weight: 700;
    }
}

/* debug */
/*
* {
    border: 1px solid #0f0;
}
*/
